<template>
    <div class="content">
        <div class="left pc">
            <div class="router-content">
                <div class="title">
                    目录
                </div>
                <div class="item-content" v-for="(item, index) in leftList" :key="index" @click="goToMesh(item.path)">
                    {{ item.title }}
                </div>
            </div>
            <div class="news-content">
                <div class="title">
                    新闻中心
                </div>
                <div class="item-content" v-for="(item, index) in newsListData" :key="index"
                    @click="goto('/newscontent', item.checkId, item.newsid)">
                    {{ item.title }}
                </div>
            </div>
        </div>
        <div class="right">
            <div class="top-jianjie">
                <div class="title">
                    公司简介
                </div>
                <div class="top-message">
                    <p>
                        <span>山东三江医疗科技有限公司</span>成立于2006年,自成立以来, 一直致力于中心血站、医院输血科、科研单位等产品的研发、生产和销售,主要产品有:隔水式融浆机、血浆解冻箱、血小板震荡保存箱、血液低温操作台、低温操作混匀仪、血液低温滤白柜、血液低温净化配血台 、医用高频热合机、血液运输箱、冷链无线监控系统、药品冷藏柜等。规格齐全,满足各种规模的用户的需求。目前公司产品全面通过了山东省医疗器械和药品包装检验研究院包括电磁兼容在内的各项检测。经过二十年的研发、磨练、持续改进,我们的产品质量趋于稳定可靠,受到了包括武汉协和医院、华西医科大医院、广州血液中心、深圳市血液中心、北京武警总医院等各地用户的赞誉和肯定。
                    </p>
                    <img src="../assets/aboutme/1.jpg" alt="">
                </div>
            </div>
            <div class="center-aboutme">
                <div class="title">关于我们</div>
                <div class="message">
                    <p>山东三江医疗科技有限公司</p>
                    <h1>公司地址：{{ webXinxi.dizhi }}</h1>
                    <h1>邮箱：{{ webXinxi.email }}</h1>
                    <h1>电话*24小时服务响应：{{ webXinxi.tel1 }}</h1>
                    <h1>电话：{{ webXinxi.tel2 }}</h1>
                    <h1>电话：{{ webXinxi.tel3 }}</h1>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { getWebXinxi, getNewsList } from '../api/api/ProducView'
import { useRouter } from 'vue-router'

const router = useRouter()
const newsListData = ref()

const _getWebXinxi = () => {
    getWebXinxi(1).then((res) => {
        console.log('网站信息获取', res);
        webXinxi.value = res.data.data
    })
}
const webXinxi = ref({})
const leftList = [
    { title: '首页', path: '/' },
    { title: '公司简介', path: '/aboute' },
    { title: '新闻中心', path: '/newslist' }
]

// 获取公司新闻
const _getNewsList = () => {
    getNewsList('sj1').then((res) => {
        console.log('新闻信息', res);
        newsListData.value = res.data.newslist
    })
}

// 跳转
const goto = (path, checkData, newsId) => {
    router.push({
        path: path,
        query: {
            checkData: checkData,
            newsId: newsId
        }
    })
}


const goToMesh = (path) => {
    router.push({
        path: path
    })
}


onMounted(() => {
    _getWebXinxi()
    _getNewsList()
});
</script>
<style lang="scss" scoped>
// 取消显示手机端 显示pc端
@media (min-width: 800px) {
    .content {
        display: flex;
        justify-content: space-between;
        width: 1200px;
        margin: 0 auto;

        .left {
            margin: 20px 0;
            width: 200px;

            .router-content {
                border: 1px solid #dedede;
                margin-bottom: 20px;

                .title {
                    padding: 10px 0 10px 20px;
                    background-color: #f7f7f7;
                    border-bottom: 1px solid #dedede;
                }

                .item-content {
                    padding: 10px 0 10px 20px;
                    background-color: white;
                }
            }


            .news-content {
                border: 1px solid #dedede;

                .title {
                    padding: 10px 0 10px 20px;
                    background-color: #f7f7f7;
                    border-bottom: 1px solid #dedede;
                }

                .item-content {
                    padding: 10px 0 10px 20px;
                    background-color: white;
                }
            }
        }

        .right {

            .top-jianjie {
                width: 980px;
                display: flex;
                flex-direction: column;
                border: 1px solid #dedede;
                margin-top: 20px;

                .title {
                    padding: 10px 0 10px 20px;
                    background-color: #f7f7f7;
                    border-bottom: 1px solid #dedede;
                }

                .top-message {
                    padding: 10px;
                    background-color: white;
                    text-indent: 2em;

                    p {
                        margin-top: 10px;
                        line-height: 30px;

                        span {
                            font-weight: 700;
                        }
                    }
                }


            }

            .center-aboutme {
                margin-top: 20px;
                background-color: white;
                text-indent: 2em;
                border: 1px solid #dedede;
                margin-bottom: 20px;

                .title {
                    padding: 10px 0 10px 20px;
                    background-color: #f7f7f7;
                    border-bottom: 1px solid #dedede;
                }

                .message {
                    padding: 10px;
                    line-height: 40px;
                    font-size: 26px;
                }
            }
        }
    }
}

// 取消显示pc端 显示手机端
@media screen and (max-width: 799px) {
    .pc {
        display: none;
    }

    .right {
        text-indent: 2em;

        .title {
            line-height: 60px;
            font-size: 26px;
            font-weight: 700;
            text-align: center;
            border-bottom: 1px solid gainsboro;
            margin-bottom: 10px;
        }

        img {
            width: 100%;
        }
    }
}
</style>
